<template>
  <div>
    <el-drawer
      ref="drawerRef"
      :title="courseId ? $t('message.edit') + $t('message.cgk') : $t('message.add') + $t('message.cgk')"
      :visible.sync="isShowDrawer"
      :before-close="closeDrawer"
      size="1000px"
    >
      <el-form
        ref="ruleForm"
        class="doumee-form"
        :model="param"
        :rules="rules"
        label-width="auto"
        label-suffix="："
      >
        <div class="property-title">{{ $t('message.kcxx') }}</div>
        <el-form-item :label="$t('message.kctp')" prop="configPicture">
          <transition name="fade">
            <Cropper
              v-if="dialogCropperVisible"
              :option-img="optionImg"
              :fileinfo="fileinfo"
              use-type="COURSE_IMG"
              :fixed-number="[690, 388]"
              @formSubmit="cropperSubmit"
              @formClose="cropperClose"
            />
          </transition>
          <div class="df_ac">
            <el-upload
              class="device-uploader"
              :action="uploadFileUrl"
              :data="uploadData"
              :auto-upload="false"
              :show-file-list="false"
              accept=".jpg,.png"
              :on-change="addFileChange"
            >
              <i class="el-icon-plus uploader-icon" />
              <div
                v-show="param.configPicture"
                class="file"
                :style="'background-image: url(' + param.configPicture + ')'"
              >
                <div class="delete">
                  <i
                    class="el-icon-delete icon"
                    @click.stop="deleteDeviceConfigAddImage"
                  />
                </div>
              </div>
            </el-upload>
            <div class="placeholder9">
              <div>{{ $t('message.jycc') }}：{{ '690px X 388px' }}</div>
              <div>{{ $t('message.zctpsm') }}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('message.kcmc')" prop="courseName">
          <el-input
            v-model="param.courseName"
            type="text"
            :disabled="courseId != '' && ( status == '4' || status == '3' )"
            class="w400"
            :placeholder="$t('message.qsr') + $t('message.kcmc')"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item :label="$t('message.kclx')" prop="courseType">
          <el-select v-model="param.courseType" :disabled="courseId != '' && status != '1'" :placeholder="$t('message.qxz') + $t('message.kclx')" class="w400" @change="courseTypeChange">
            <el-option
              v-for="item in lxList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.kcrs')" :prop="param.numLimit == '2' ? 'rs' : 'aaaa'">
          <div class="df_ac" style="height: 36px;">
            <el-radio v-if="param.courseType != '1'" v-model="param.numLimit" :disabled="status == '4' || status == '3'" label="1">{{ $t('message.bx') }}</el-radio>
            <el-radio v-model="param.numLimit" :disabled="status == '4' || status == '3'" label="2">{{ $t('message.zdrs') }}</el-radio>
            <div v-if="param.numLimit === '2'" class="df">
              <el-input
                v-model="param.rs[0]"
                type="number"
                class="w200"
                oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                :placeholder="$t('message.rsxzsm')"
                @blur="check_num(0)"
              />
              <span class="ml10 mr10">-</span>
              <el-input
                v-model="param.rs[1]"
                type="number"
                oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                class="w200"
                :placeholder="$t('message.rssx')"
                @blur="check_num(1)"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('message.skjl')">
          <el-select v-model="param.teacherId" clearable :placeholder="$t('message.qxz') + $t('message.skjl')" class="w400">
            <el-option
              v-for="item in jlList"
              :key="item.teacherId"
              :label="item.teacherName"
              :value="item.teacherId"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.kss')" prop="classNum">
          <el-input v-model="param.classNum" :disabled=" courseId != '' && ( status == '4' || status == '3' )" oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 5)" :placeholder="$t('message.qsr') + $t('message.kss')" class="w400" />
        </el-form-item>
        <el-form-item :label="$t('message.skdd')" prop="site">
          <el-input
            v-model="param.site"
            type="text"
            class="w400"
            :placeholder="$t('message.qsr') + $t('message.skdd')"
            maxlength="50"
          />
        </el-form-item>
        <template v-if="param.courseType != 3">
          <el-form-item :label="$t('message.kkrq')" prop="beginDate" :rules="{ required: param.courseType == 3 ? false:true, message: $t('message.qxz') + $t('message.kkrq'), trigger: 'change' }">
            <el-date-picker
              v-model="param.beginDate"
              :picker-options="pickerOptions"
              type="date"
              class="w400"
              :disabled="courseId != '' && status == '4'"
              value-format="yyyy-MM-dd"
              :placeholder="$t('message.qxz') + $t('message.kkrq')"
              @change="beginDateChange"
            />
          </el-form-item>
          <el-form-item :label="$t('message.jkrq')" prop="courseEndDate" :rules="{ required: param.courseType == 3 ? false:true, message: $t('message.qxz') + $t('message.jkrq'), trigger: 'change' }">
            <el-date-picker
              v-model="param.courseEndDate"
              :picker-options="pickerOptions"
              type="date"
              class="w400"
              value-format="yyyy-MM-dd"
              :placeholder="$t('message.qxz') + $t('message.jkrq')"
              @change="courseEndDateChange"
            />
          </el-form-item>
          <el-form-item :label="$t('message.bmjzsj')" prop="endTime" :rules="{ required: param.courseType == 3 ? false:true, message: $t('message.qxz') + $t('message.bmjzsj'), trigger: 'change' }">
            <el-date-picker
              v-model="param.endTime"
              :picker-options="pickerOptions"
              type="datetime"
              class="w400"
              :disabled="courseId != '' && ( status == '4' || status == '3' )"
              value-format="yyyy-MM-dd HH:mm:ss"
              :placeholder="$t('message.qxz') + $t('message.bmjzsj')"
              @change="endTimeChange"
            />
          </el-form-item>
        </template>
        <el-form-item :label="$t('message.tsjs')">
          <el-input
            v-model="param.introduction"
            type="text"
            class="w400"
            :placeholder="$t('message.qsr') + $t('message.tsjs')"
            maxlength="100"
          />
        </el-form-item>
        <el-form-item :label="$t('message.kcxq')">
          <div class="secondColor">{{ $t('message.tpbnfz') }}</div>
          <!-- <WangEditor
            ref="myTextEditor"
            :value="param.des"
            @input="(e) => $set(param, 'des', e)"
          /> -->
          <quill-editor
            ref="myTextEditor"
            v-model="param.des"
            :placeholder="$t('message.qsrnr')"
            class="myQuillEditor"
            :options="quillOption"
          />
        </el-form-item>

        <div class="line-style" />
        <div class="property-title">{{ $t('message.smxx') }}</div>
        <el-form-item :label="$t('message.kczj')" prop="price">
          <el-input
            v-model="param.price"
            type="text"
            class="w400"
            :disabled="courseId != '' && status != '1'"
            :placeholder="$t('message.qsr') + $t('message.kczj')"
            oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            maxlength="100"
          />
        </el-form-item>
        <el-form-item :label="$t('message.smfs')" prop="channel">
          <el-checkbox-group v-model="param.channel" :disabled="courseId != '' && ( status == '4' || status == '3' )">
            <el-checkbox label="01">{{ $t('message.xcxd') }}</el-checkbox>
            <el-checkbox label="02">{{ $t('message.cgpcd') }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('message.zklx')" prop="discountType">
          <el-select v-model="param.discountType" :disabled="courseId != '' && status != '1'" :placeholder="$t('message.qxz') + $t('message.zklx')" class="w400">
            <el-option
              v-for="item in zkList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <div v-if="param.discountType == '1'" style="display: flex; flex-wrap: wrap">
          <el-form-item
            v-for="vip in vipType"
            :key="vip.id"
            align="center"
            :label="vip.cardName || vip.name"
            style="width: 50%"
            :prop="`discountMap.${vip.id}`"
            :rules="{ required: true, message: $t('message.qsr') + $t('message.hyzk'), trigger: 'blur' }"
          >
            <el-input
              v-model="param.discountMap[vip.id]"
              :disabled="courseId != '' && status != '1' && vip.disabled"
              onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
              oninput="if(value<0||value>1) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
              type="text"
              :placeholder="$t('message.qsr') + $t('message.hyzk') + '(' + $t('message.bllwxs') + ')'"
              maxlength="50"
            />
          </el-form-item>
        </div>

        <div class="line-style" />
        <div class="property-title">{{ $t('message.qtxx') }}</div>
        <el-form-item :label="$t('message.lxdh')" prop="phone">
          <el-input v-model="param.phone" class="w400" oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 16)" :placeholder="$t('message.qsr') + $t('message.lxdh')" />
        </el-form-item>
        <el-form-item :label="$t('message.sort')">
          <el-input v-model="param.sortNum" maxlength="11" class="w400" oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 16)" :placeholder="$t('message.qsr') + $t('message.sort')" />
        </el-form-item>
        <el-form-item :label="$t('message.sph')">
          <el-button
            type="primary"
            @click="openChanne"
          ><span class="df_ac"><i class="el-icon-link fs_18" />{{ param.videoId && param.videoNumberId ? $t('message.ygl') : $t('message.glwxsphsp') }}</span></el-button>
          <span
            class="placeholder9 ml10"
          >{{ $t('message.szspmsm') }}</span>
        </el-form-item>
        <el-form-item v-if="param.courseType == 3" :label="$t('message.sffb')">
          <el-radio v-model="param.isClass" :disabled="courseId != '' && ( status == '4' || status == '3' )" label="1">{{ $t('message.shi') }}</el-radio>
          <el-radio v-model="param.isClass" :disabled="courseId != '' && ( status == '4' || status == '3' )" label="0">{{ $t('message.fou') }}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('message.qksfbk')">
          <el-radio v-model="param.muml" :disabled="courseId != '' && ( status == '4' || status == '3' )" label="1">{{ $t('message.shi') }}</el-radio>
          <el-radio v-model="param.muml" :disabled="courseId != '' && ( status == '4' || status == '3' )" label="0">{{ $t('message.fou') }}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('message.sfrmkc')" prop="isHot">
          <el-switch
            v-model="param.isHot"
            :active-value="'1'"
            :inactive-value="'0'"
          />
        </el-form-item>
        <!-- <div class="line-style" />
      <div class="property-title">{{ $t('message.hyzk') }}</div> -->
        <el-form-item>
          <el-button
            v-preventReClick
            :loading="subLoading"
            type="primary"
            @click="onSubmit()"
          >{{ $t('message.tj') }}</el-button>
          <el-button
            v-preventReClick
            @click="cancelSub"
          >{{ $t('message.qx') }}</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-dialog
      :title="$t('message.glsph')"
      :visible.sync="isShowChannel"
      width="800px"
    >
      <div class="warnningTip">
        {{ $t('message.sphspsm') }}
      </div>
      <el-form
        ref="channelRef"
        class="doumee-form"
        :model="param"
        :rules="rules"
        label-width="auto"
        label-suffix="："
      >
        <el-form-item :label="$t('message.sphID')" prop="videoNumberIdTemp">
          <el-input
            v-model="param.videoNumberIdTemp"
            style="width: 400px"
            :placeholder="$t('message.qsr') + $t('message.sphID')"
          />
        </el-form-item>
        <el-form-item>
          <div class="placeholder9">
            <span>{{ $t('message.thhqsphdl') }}</span>
            <a
              href="https://channels.weixin.qq.com/"
              target="_blank"
              class="primaryColor underline"
            >{{ $t('message.sphzs') }}</a>
            <span>{{ $t('message.zsyfzsphid') }}</span>
          </div>
          <div>
            <el-image
              class="w400"
              :preview-src-list="[
                'https://axure-file.lanhuapp.com/md5__6d903ccf499fd6042fd1a332091bdbfd.png',
              ]"
              src="https://axure-file.lanhuapp.com/md5__6d903ccf499fd6042fd1a332091bdbfd.png"
            />
          </div>
        </el-form-item>
        <el-form-item :label="$t('message.spID')" prop="videoIdTemp">
          <el-input
            v-model="param.videoIdTemp"
            style="width: 400px"
            :placeholder="$t('message.qsr') + $t('message.spID')"
          />
        </el-form-item>
        <el-form-item>
          <div class="placeholder9">
            <span>{{ $t('message.thhqspdl') }}</span>
            <a
              href="https://channels.weixin.qq.com/"
              target="_blank"
              class="primaryColor underline"
            >{{ $t('message.sphzs') }}</a>
            <span>{{ $t('message.zdtglfzspid') }}</span>
          </div>
          <div>
            <el-image
              class="w400"
              :preview-src-list="[
                'https://axure-file.lanhuapp.com/md5__fe942d7dc67e783dd04aeb849577af58.png',
              ]"
              src="https://axure-file.lanhuapp.com/md5__fe942d7dc67e783dd04aeb849577af58.png"
            />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeChanne">{{ $t('message.qx') }}</el-button>
        <el-button type="primary" @click="subChanne">{{ $t('message.qd') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { uploadFile, cardList, teacherList, editCourse, startCourse, infoCourse } from '@/api'
import Cropper from '@/components/cropper'
// import WangEditor from '@/components/quillOption'
import { quillEditor } from 'vue-quill-editor'
import quillConfig from '@/api/sc.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import i18n from '@/utils/i18n'
export default {
  components: {
    quillEditor,
    Cropper
  },
  data() {
    var newRule = (rule, value, callback) => {
      if (value[0] === undefined && value[1] === undefined) {
        callback(new Error(rule.message || i18n.t('message.qsr') + i18n.t('message.kcrsfw')))
      } else if (!/^\+?[1-9][0-9]*$/.test(value[0]) || !/^\+?[1-9][0-9]*$/.test(value[1])) {
        callback(new Error(rule.message || i18n.t('message.qsr') + i18n.t('message.zqrs')))
      } else if (value[0] < 1) {
        callback(new Error(rule.message || i18n.t('message.qsr') + i18n.t('message.zqrsfw')))
      } else if (Number(value[0]) > Number(value[1])) {
        callback(new Error(rule.message || i18n.t('message.qsr') + i18n.t('message.zqrsfw')))
      } else {
        callback()
      }
    }
    return {
      quillOption: quillConfig,
      isShowChannel: false,
      isShowDrawer: false,
      courseId: '',
      status: '',
      param: {
        numLimit: '1',
        muml: '1',
        isClass: '1',
        discountType: '0',
        venueId: sessionStorage.getItem('venueId'),
        termType: '0',
        channel: [],
        rs: [],
        xqList: [],
        discountMap: {}
      },

      subLoading: false,
      dialogCropperVisible: false,
      optionImg: '',
      files: {},
      fileinfo: {},
      uploadFileUrl: uploadFile,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
        }
      },
      uploadData: {
        folder: 'COURSE_IMG',
        type: ''
      },
      lxList: [
        { value: '1', label: this.$t('message.ttk') },
        { value: '3', label: this.$t('message.cqk') }
      ],
      zkList: [
        { value: '0', label: this.$t('message.mrzk') },
        { value: '1', label: this.$t('message.zdyzk') }
      ],
      jlList: [],
      vipType: [],
      venueId: sessionStorage.getItem('venueId'),
      rules: {
        videoNumberIdTemp: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        videoIdTemp: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        configPicture: [{ required: true, message: this.$t('message.qsc') + this.$t('message.kctp'), trigger: 'change' }],
        courseName: [{ required: true, message: this.$t('message.qsr') + this.$t('message.kcmc'), trigger: 'blur' }],
        courseType: [{ required: true, message: this.$t('message.qxz') + this.$t('message.kclx'), trigger: 'change' }],
        teacherId: [{ required: true, message: this.$t('message.qxz') + this.$t('message.skjl'), trigger: 'change' }],
        itemsIds: [{ required: true, message: this.$t('message.qxz') + this.$t('message.kclm'), trigger: 'change' }],
        price: [{ pattern: /^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, required: true, message: this.$t('message.qsrzrksdj'), trigger: 'blur' }],
        classNum: [{ pattern: /^\+?[1-9][0-9]*$/, required: true, message: this.$t('message.qsr') + this.$t('message.zqkss'), trigger: 'blur' }],
        rs: [{ required: true, validator: newRule, trigger: 'change' }],
        site: [{ required: true, message: this.$t('message.qsr') + this.$t('message.skdd'), trigger: 'blur' }],
        introduction: [{ required: true, message: this.$t('message.qsr') + this.$t('message.kcjj'), trigger: 'blur' }],
        des: [{ required: true, message: this.$t('message.qsr') + this.$t('message.kcxq'), trigger: 'blur' }],
        xqList: [{ required: true, message: this.$t('message.qsc') + this.$t('message.xqtp'), trigger: 'change' }],
        discountType: [{ required: true, message: this.$t('message.qxz') + this.$t('message.zklx'), trigger: 'change' }],
        channel: [{ type: 'array', required: true, message: this.$t('message.qzsxzygsmfs'), trigger: 'change' }]
      },
      content: ''
    }
  },
  created() {
    this.getTeachList()
  },
  methods: {
    getDetail(courseId) {
      // 获取卡类型列表
      infoCourse({ param: { courseId }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          const obj = res.record
          if (obj.channel) {
            obj.channel = obj.channel.split(',')
          } else {
            obj.channel = []
          }
          this.param = {
            ...obj,
            termType: obj.termType ?? '0',
            flag: '2',
            itemsIds: obj.courseItemIds,
            beginDate: obj.beginDate ?? '',
            configPicture: obj.courseImageUrl,
            rs: [obj.peopleNumLow, obj.peopleNumUp]
          }
          if (res.record.discountType === '0') {
            this.$set(this.param, 'discountMap', {})
            this.getCardList()
          } else {
            const discountMap = obj.discountMap
            this.$set(this.param, 'discountMap', obj.discountMap)
            const arrs = []
            cardList({})
              .then((res) => {
                if (res.errorCode === '000000') {
                  const vip = res.recordList
                  vip.forEach(item => {
                    arrs.push({
                      name: item.cardName,
                      id: item.id,
                      value: discountMap[item.id],
                      disabled: !!discountMap[item.id]
                    })
                  })
                  this.vipType = arrs
                }
              })
              .catch((err) => {
                console.log(err)
              })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    courseTypeChange(val) {
      if (val === '1') {
        this.param.numLimit = '2'
      } else {
        this.$set(this.param, 'beginDate', null)
        this.$set(this.param, 'courseEndDate', null)
        this.$set(this.param, 'endTime', null)
      }
    },
    closeDrawer() {
      this.isShowDrawer = false
      this.$emit('close')
    },
    subChanne() {
      this.$refs.channelRef.validate((valid) => {
        if (valid) {
          const { param } = this
          this.$set(this.param, 'videoId', param.videoIdTemp)
          this.$set(this.param, 'videoNumberId', param.videoNumberIdTemp)
          this.isShowChannel = false
        } else {
          console.log('===')
        }
      })
    },
    openChanne() {
      this.isShowChannel = true
      const { param } = this
      this.$set(this.param, 'videoIdTemp', param.videoId || '')
      this.$set(this.param, 'videoNumberIdTemp', param.videoNumberId || '')
    },
    closeChanne() {
      this.$set(this.param, 'videoIdTemp', '')
      this.$set(this.param, 'videoNumberIdTemp', '')
      this.isShowChannel = false
    },
    endTimeChange(val) {
      if (val > this.param.courseEndDate) {
        this.param.endTime = ''
        this.$message.warning(this.$t('message.bmsjyxyjssj'))
      }
    },
    courseEndDateChange(val) {
      if (val < this.param.beginDate) {
        this.param.courseEndDate = ''
        this.$message.warning(this.$t('message.jssjydykssj'))
        return
      }
      if (val < this.param.endTime) {
        this.param.courseEndDate = ''
        this.$message.warning(this.$t('message.bmsjyxyjssj'))
      }
    },
    beginDateChange(val) {
      if (this.param.courseEndDate && val > this.param.courseEndDate) {
        this.param.beginDate = ''
        this.$message.warning(this.$t('message.jssjydykssj'))
      }
    },
    check_num(e) {
      this.param.rs[e] = this.param.rs[e].replace(/[^\d]/g, '')
    },
    getTeachList(page) {
      const venueId = sessionStorage.getItem('venueId')
      teacherList({ param: { venueId, teacherType: '0', status: '1', isOnJob: '1' }})
        .then(res => {
          this.jlList = res.recordList
        })
    },
    getCardList() {
      // 获取卡类型列表
      cardList({})
        .then((res) => {
          if (res.errorCode === '000000') {
            this.vipType = res.recordList
            const vip = res.recordList
            vip.forEach(e => {
              this.$set(this.param.discountMap, e.id, '')
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 上传图片成功
    uploadSuccess(res, file, fileList) {
      if (res.success) {
        this.$set(this.param, 'configPicture', res.showUrl)
        this.$set(this.param, 'courseImage', res.insertUrl)
        this.$refs.ruleForm.clearValidate()
      } else {
        this.$message.error(res.msg || this.$t('message.scsb'))
      }
    },
    // 上传图片，开始裁剪
    async addFileChange(file) {
      // 上传，拿到file文件
      this.files = file.raw
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      if (config.success) {
        this.$set(this.param, 'configPicture', config.showUrl)
        this.$set(this.param, 'courseImage', config.insertUrl)
        this.$refs.ruleForm.clearValidate()
        this.dialogCropperVisible = false
      } else {
        this.$message.error(config.msg || this.$t('message.scsb'))
        this.$refs.form.clearValidate()
        this.dialogCropperVisible = false
      }
    },
    // 裁剪取消
    cropperClose() {
      this.dialogCropperVisible = false
    },
    uploadSuccesss(res, file, fileList) {
      if (res.success) {
        const arr = this.param.xqList
        res.url = res.showUrl
        arr.push(res)
        this.$set(this.param, 'xqList', arr)
        this.$refs.ruleForm.clearValidate()
      } else {
        this.$message.error(res.msg || this.$t('message.scsb'))
      }
    },
    // 删除已上传图片
    deleteDeviceConfigAddImage() {
      this.$set(this.param, 'courseImage', '')
      this.$set(this.param, 'configPicture', '')
    },
    handleRemove(file, fileList) {
      this.$set(this.param, 'xqList', fileList)
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // const arr = this.param.xqList
          // let str = ''
          // arr.forEach(e => {
          //   str = str + e.insertUrl + ','
          // })
          this.param.price = Number(this.param.price)
          this.param.venueId = this.venueId
          const param = { ...this.param }
          param.classNum = Number(param.classNum)
          param.channel = param.channel.join(',')
          param.flag = '2'
          this.subLoading = true
          if (param.numLimit === '1') {
            param.numLow = null
            param.numUp = null
            param.peopleNumLow = null
            param.peopleNumUp = null
          } else {
            param.numLow = Number(this.param.rs[0])
            param.numUp = Number(this.param.rs[1])
            param.peopleNumLow = Number(this.param.rs[0])
            param.peopleNumUp = Number(this.param.rs[1])
          }
          if (param.courseType !== 3 && param.courseType !== '3') {
            param.isClass = null
          }
          if (this.courseId) {
            editCourse({
              param
            })
              .then(res => {
                this.subLoading = false
                if (res.errorCode === '000000') {
                  this.$message.success(this.$t('message.tjcg'))
                  this.isShowDrawer = false
                  this.$emit('success')
                  this.$emit('close')
                }
              })
              .catch(err => {
                this.subLoading = false
                console.log(err)
              })
          } else {
            startCourse({
              param
            })
              .then(res => {
                this.subLoading = false
                if (res.errorCode === '000000') {
                  this.$message.success(this.$t('message.tjcg'))
                  this.isShowDrawer = false
                  this.$emit('success')
                  this.$emit('close')
                }
              })
              .catch(err => {
                this.subLoading = false
                console.log(err)
              })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancelSub() {
      this.isShowDrawer = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.line-style {
  margin-bottom: 20px;
}
.device-uploaders {
  ::v-deep .el-upload-list__item {
    width: 80px;
    height: 80px;
  }
  ::v-deep .el-upload {
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
}
</style>
